<template>
	<view class="mainpadding beijingse">
		<view class="sousuobox flexleft" @click="tzsousuo">
			<view class="sousuoicon margin_right2"></view>
			<input class="inputs" type="text" placeholder="请输入你要搜索的内容" v-model="keyword"  confirm-type="search" @confirm="init()">
		</view>
		<!-- 商品 -->
		<view class="shangpinbox">
			<view class="flexbetween margin_top">
				<view :class="current==0?'nofocustext':'focustext'" @click="selectab(0)">综合</view>
				<view class="flexleft">
					<view :class="current==1?'nofocustext ':'focustext'" @click="selectab(1)">销量</view>
					<view class="trbox">
						<view :class="type==1?'shanghjt':'shanghuijt'" @click.stop="changetype(1)"></view>
						<view  :class="type==2?'xiahjt':'xiahuijt'" @click.stop="changetype(2)"></view>
					</view>
				</view>
				<view class="flexleft">
					<view :class="current==2?'nofocustext':'focustext'" @click="selectab(2)">价格</view>
					<view class="trbox">
						<view :class="type==3?'shanghjt':'shanghuijt'" @click.stop="changetype(3)"></view>
						<view  :class="type==4?'xiahjt':'xiahuijt'" @click.stop="changetype(4)"></view>
					</view>
				</view>
				<view :class="henghshu==1?'hengzhe':'shuzhe'" @click="xuanze()"></view>
			</view>
			<view class="zwtimg flexcenter" v-if="!list.data.length">
				<image src="../../static/image/system/zwt.png" mode=""></image>
			</view>
			<template v-if="list.data.length">
				<view class="" v-if="henghshu==1">
					<view class="flexbetween flex_wrap">
						<view class="shangpbox margin_top" v-for="item in list.data" :key="item.id"  @click="tzspxq(item.id)">
							<view class="shangptp">
								<image :src="item.image_text" mode=""></image>
							</view>
							<view class="mainpadding ffffff baibox">
								<view class="ershil yhxiank">{{item.title}}</view>
								<view class="flexbetween margin_top5" v-if="lastmsg.type==1">
									<view class="jiagetext">￥{{item.price}}</view>
									<view class="goueucheicon" ></view>
								</view>
								<view class="jiagetext margin_top" v-if="lastmsg.type==2">{{item.goodsprice.fl_price}}福利券+{{item.goodsprice.price}}现金</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 竖着 -->
				<view class="" v-if="henghshu==2">
					<view class="flextops margin_top ffffff radius mainpadding dingwei" v-for="item in list.data" :key="item.id"  @click="tzspxq(item.id)">
						<view class="shuzslu">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="" style="width: 62%;">
							<view class="ershil yhxiank">{{item.title}}</view>
							<view class="flexbetween shujrgwc" v-if="lastmsg.type==1">
								<view class="jiagetext">￥{{item.price}}</view>
								<view class="goueucheicon"></view>
							</view>
							<view class="jiagetext shujrgwc" v-if="lastmsg.type==2">{{item.goodsprice.fl_price}}福利券+{{item.goodsprice.price}}现金</view>
						</view>
					</view>
				</view>
			</template>
			<!-- 横着 -->
			
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				current: 0,
				henghshu: 1,
				lastmsg: {
					keywords: "",
					category_id: "",
					type:""
				},
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				// 1销量由高到底，2销量由低到高，3价格由高到底，4价格由低到高
				type:0,
				keyword:"",
			}
		},
		onLoad(options) {
			//接收对象
			if(options.msg){
				this.lastmsg = JSON.parse(decodeURIComponent(options.msg));
				this.keyword = this.lastmsg.keywords
			}
			this.init()
		},
		methods: {
			// 热门推荐列表
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/api/goods/goodsList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					hot_status:this.type==1?1:this.type==2?2:'',
					zh_status:this.current==0?1:"",
					price_status:this.type==3?1:this.type==4?2:'',
					keyword:this.keyword,
					category_id:this.lastmsg.category_id,
					type:this.lastmsg.type
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			
			xuanze() {
				this.henghshu = this.henghshu == 1 ? 2 : 1
			},
			// 切换筛选项
			selectab(i) {
				if (i == this.current) {
					return false
				}
				if(i==1){
					this.type=1
				}
				if(i==2){
					this.type=3
				}
				this.current = i
				this.init()
			},
			// 切换状态值
			changetype(i){
				this.type=i
				if(i==1 || i==2){
					this.current = 1
				}
				if(i==3 || i==4){
					this.current = 2
				}
				this.init()
			},
			// 跳转商品详情
			tzspxq(id) {
				let obj = {
					goods_id:id
				}
				uni.navigateTo({
					url: '/pages/homepage/shangpinxq?msg=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	// 竖着
	.shujrgwc {
		position: absolute;
		bottom: 30rpx;
		width: 57%;
		right: 30rpx;
	}

	.shuzslu {
		width: 206rpx;
		height: 206rpx;
		border-radius: 11rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 11rpx;
		}
	}

	//结束
	// 商品列表样式
	.shangpbox {
		width: 48%;
	}

	.jiagetext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FAB536;
	}

	.baibox {
		border-radius: 0 0 11rpx 11rpx;
	}

	// .yhxiank {
	// 	overflow: hidden;
	// 	text-overflow: ellipsis;
	// 	white-space: nowrap;
	// }

	.shangptp {
		width: 338rpx;
		border-radius: 11rpx 11rpx 0 0;
		height: 338rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 11rpx 11rpx 0 0;
		}
	}
</style>
<style lang="scss" scoped>
	.shuzhe {
		width: 33rpx;
		height: 33rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/shu.png');
	}

	.hengzhe {
		width: 33rpx;
		height: 33rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/heng.png');
	}

	.trbox {
		margin-left: 10rpx;
	}

	.xiahuijt {
		margin-top: 6rpx;
		width: 13rpx;
		height: 10rpx;
		background-image: url('../../static/image/system/xiahuijt.png');
		background-size: 100% 100%;
	}

	.shanghuijt {
		width: 13rpx;
		height: 10rpx;
		background-image: url('../../static/image/system/shanghuijt.png');
		background-size: 100% 100%;
	}

	.shanghjt {
		width: 13rpx;
		height: 10rpx;
		background-image: url('../../static/image/system/shanghuangjt.png');
		background-size: 100% 100%;
	}

	.xiahjt {
		margin-top: 6rpx;
		width: 13rpx;
		height: 10rpx;
		background-image: url('../../static/image/system/xiahuangjt.png');
		background-size: 100% 100%;
	}

	.focustext {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.nofocustext {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.sousuobox {
		width: 100%;
		background: #F3F3F3;
		padding: 20rpx 40rpx;
		border-radius: 60rpx;
		box-sizing: border-box;
	}
</style>
